<template>
	<view>
		<view v-if="allow">
			<view :style="'margin-top:'+top"></view>
			<view class="change-tag" @click="show = true" :style="'height: '+menuButtonHeight+';background-color: '+bg">
				<text class="name u-p-r-30">切换身份</text>
				<u-icon name="arrow-down-fill" size="14" class="ico-color"></u-icon>
			</view>
		</view>
		
		<!-- 选择切换 -->
		<u-popup v-model="show" mode="bottom" border-radius="14">
			<identities-list @allow="allowChange" @hide="hideList"></identities-list>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"change-identities",
		props:{
			top: {
				type: String,
				default(){
					return '0px'
				}
			},
			bg: {
				type: String,
				default(){
					return 'inherit'
				}
			}
		},
		data() {
			return {
				allow: true,
				menuButtonTop: 0,
				menuButtonHeight: '32px',
				show: false
			};
		},
		mounted() {
			// #ifdef MP-WEIXIN
			// this.menuButtonTop = wx.getMenuButtonBoundingClientRect().top + 'px'
			this.menuButtonHeight = wx.getMenuButtonBoundingClientRect().height + 'px'
			// #endif
		},
		methods: {
			// 是否允许切换身份
			allowChange(value){
				this.allow = value
			},
			// 隐藏列表
			hideList(value){
				this.show = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.change-tag {
		border: 1px solid $u-color-main;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		border-radius: 72rpx;
		width: 240rpx;
		margin: 0 auto;
		.name{
			color: $u-color-main;
		}
	}
	.ico-color{
		color: $u-color-main;
	}
	.tl{
		color: #606266;
		font-size: 32rpx;
	}
</style>